<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One A Two B</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url("img/background.png");
        }

        .Caption {
            font-family: "Courier New", serif;
            font-size: 128px;
            font-weight: bolder;
            color: white;
            user-select: none;
        }

        .Record {
            padding-left: 10px;
            background-color: #2196f3;
            color: aliceblue;
            margin-bottom: 5px;
            width: 294px;
            border: 3px solid transparent;
            font-family: Consolas, serif;
            font-size: 22px;
            transition: all 0.15s ease-in-out;
            user-select: none;
        }

        .Record:hover {
            border: 3px solid #64b5f6;
        }

        .RecordArea {
            margin-top: 120px;
            height: 500px;
            float: left;
            position: fixed;
            background-color: #2196f3;
            max-width: 10px;
            overflow: hidden;
            transition: max-width 0.6s ease-in-out;
            box-shadow: black 5px 5px 10px -8px;
        }

        .RecordArea:hover {
            max-width: 666px;
        }

        .Box {
            transition: all 0.3s ease-in-out;
            margin: 40px;
            display: inline-block;
            width: 95px;
            height: 95px;
            line-height: 95px;
            text-align: center;
            font-family: Consolas, serif;
            font-size: 64px;
            font-weight: bold;
            color: white;
            background-color: darkgray;
            border-radius: 52px;
            border: 7px solid white;
            user-select: none;
            /*cursor: pointer;*/
            /*box-shadow: black 3px 3px 10px -8px;*/
        }

        .NumberButton {
            transition: all 0.15s ease-in-out;
            margin: 20px;
            display: inline-block;
            width: 95px;
            height: 95px;
            line-height: 95px;
            text-align: center;
            font-family: Consolas, serif;
            font-size: 64px;
            font-weight: bold;
            color: white;
            background-color: #00bcd4;
            border: 7px solid transparent;
            cursor: pointer;
            user-select: none;
            border-radius: 15px;
            box-shadow: black 3px 3px 10px -8px;
        }

        .ContentArea {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .ContentLine {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="RecordArea">
    <div class="Record">Records:</div>
</div>
<div class="ContentArea">
    <div class="Caption">1A2B</div>
    <div class="ContentArea">
        <div class="ContentLine">
            <div class="Box" id="first"></div>
            <div class="Box" id="second"></div>
            <div class="Box" id="third"></div>
            <div class="Box" id="fourth"></div>
        </div>
        <div class="ContentArea">
            <div class="ContentLine">
                <div class="NumberButton" id="button1">1</div>
                <div class="NumberButton" id="button2">2</div>
                <div class="NumberButton" id="button3">3</div>
                <div class="NumberButton" id="button4">4</div>
                <div class="NumberButton" id="button5">5</div>
            </div>
            <div class="ContentLine">
                <div class="NumberButton" id="button6">6</div>
                <div class="NumberButton" id="button7">7</div>
                <div class="NumberButton" id="button8">8</div>
                <div class="NumberButton" id="button9">9</div>
                <div class="NumberButton" id="button0">0</div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function () {
        function randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                case 2:
                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                default:
                    return 0;
            }
        }

        function generate() {
            return randomNum(0, 9);
        }

        let answer = function () {
            let thousand = generate();
            while (thousand === 0) {
                thousand = generate();
            }
            let vec = [thousand];
            for (let i = 0; i < 3; i++) {
                let number = generate();
                let needContinue = true;
                while (needContinue) {
                    needContinue = false;
                    for (let j = 0; j < vec.length; j++) {
                        if (number === vec[j]) {
                            number = generate();
                            needContinue = true;
                            break;
                        }
                    }
                }
                vec.push(number);
            }
            let result = 0;
            for (let i = 0; i < vec.length; i++) {
                result = result * 10 + vec[i];
            }
            return result;
        }().toString();
        $(".Caption").hover(
            function () {
                let self = $(this);
                if (self.text() !== "You win!") {
                    self.fadeOut("slow", function () {
                        self.text(answer);
                        self.fadeIn("slow");
                    });
                }
            },
            function () {
                let self = $(this);
                if (self.text() !== "You win!") {
                    self.fadeOut("slow", function () {
                        self.text("1A2B");
                        self.fadeIn("slow");
                    });
                }
            }
        );

        function isDisabled(component) {
            return $(component).attr("isDisabled") === "true";
        }

        function disableButton(button) {
            $(button).css("backgroundColor", "grey");
            $(button).css("border", "7px solid darkgrey");
            $(button).css("box-shadow", "black 0 0 0");
            $(button).css("cursor", "default");
            $(button).attr("isDisabled", "true");
        }

        function enableButton(button) {
            $(button).css("backgroundColor", "#00bcd4");
            $(button).css("border", "7px solid transparent");
            $(button).css("box-shadow", "black 3px 3px 10px -8px");
            $(button).css("cursor", "pointer");
            $(button).attr("isDisabled", "false");
        }

        function enableBox(box, button) {
            $(box).text($(button).text());
            $(box).attr("isDisabled", "false");
            $(box).css("cursor", "pointer");
            $(box).css("backgroundColor", "#9c27b0");
            $(box).css("boxShadow", "black 3px 3px 10px -8px");
        }

        function disableBox(box) {
            enableButton("#button" + $(box).text());
            $(box).text("");
            $(box).attr("isDisabled", "true");
            $(box).css("cursor", "default");
            $(box).css("backgroundColor", "darkgrey");
            $(box).css("boxShadow", "black 0 0 0");
        }

        function getTargetBox() {
            let targetBox = $("#first");
            if (targetBox.text() !== "") {
                targetBox = null;
                if ($("#second").text() === "") {
                    targetBox = $("#second");
                } else if ($("#third").text() === "") {
                    targetBox = $("#third");
                } else if ($("#fourth").text() === "") {
                    targetBox = $("#fourth");
                }
            }
            return targetBox;
        }

        let boxes = $(".Box");
        boxes.attr("isDisabled", "true");
        boxes.click(function () {
            if (!isDisabled(this)) {
                disableBox(this);
            }
        });
        let numberButtons = $(".NumberButton");
        numberButtons.attr("isDisabled", "false");
        numberButtons.hover(
            function () {
                if (!isDisabled(this)) {
                    $(this).css("backgroundColor", "#4dd0e1");
                    $(this).css("border", "7px solid white");
                }
            },
            function () {
                if (!isDisabled(this)) {
                    $(this).css("backgroundColor", "#00bcd4");
                    $(this).css("border", "7px solid transparent");
                }
            }
        );
        numberButtons.click(function () {
            if (!isDisabled(this)) {
                let targetBox = getTargetBox();
                if (targetBox != null) {
                    enableBox(targetBox, this);
                    disableButton(this);
                    if (getTargetBox() == null) {
                        // 猜测完成
                        let guess = function () {
                            let thousand = parseInt($("#first").text());
                            let hundred = parseInt($("#second").text());
                            let ten = parseInt($("#third").text());
                            let single = parseInt($("#fourth").text());
                            return thousand * 1000 + hundred * 100 + ten * 10 + single;
                        }().toString();
                        let a = 0;
                        let b = 0;
                        for (let i = 0; i < guess.length; i++) {
                            for (let j = 0; j < answer.length; j++) {
                                if (guess[i] === answer[j]) {
                                    if (i === j) {
                                        a += 1;
                                    } else {
                                        b += 1;
                                    }
                                }
                            }
                        }
                        let record = guess + " -> ( " + a + " )A, ( " + b + " )B";
                        let recordArea = $(".RecordArea");
                        recordArea.html(
                            recordArea.html() + "<div class='Record'>" + record + "</div>"
                        );
                        if (guess === answer) {
                            $(".Caption").text("You win!");
                            $("body").css("backgroundImage", "url('img/winner.png')");
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>